<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <base href="">
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <style>
        .favorites {
            background: grey;
            color: white;
            border: thin solid black;
            padding: 0.2em;
        }
    </style>
</head>

<body>
    <!-- pre与code组合, 阻止浏览器合并空白字符，让代码格式得以保留 -->
    <pre>
        <code>
            var fruits = ["apples","oranges","mangoes","cherries"];
            for (var i =0; i < fruits.length; i++){
                document.writeln("I like " + fruits[i]);
            }
        </code>
    </pre>
    <!-- div元素 没有具体含义，含义通常是由全局属性class或id决定的
        不到万不得已不要使用div?
    -->
    <div class="favorites">
        <!-- p元素 建立段落 -->
        <p>I like apples and oranges.

            I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
            You can see other fruits I like <a href="./HTML_基本结构.html">here</a>.</p>

        <p><strong>Warning:</strong> Eating <u>too many</u> oranges can give you heart burn.</p>

        <p>My favorite kind of orange is the mandarin, properly known as <i>citrus reticulata</i>.
            Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>
        
    </div>
    <!-- blockquote元素 表示引自他处的一片内容 -->
    <!-- hr元素添加主题分隔 -->
    <blockquote cite="#">
        roketa oga!
        <hr>
        rua rua rua!
        <hr>
        sa sa sa!
    </blockquote>
    <p>The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the
        Florida citrus industry.</p>

    <p>I still remember the best apple I ever tasted.
        I bought it at <time datetime="15:00">3 o'clck</time>
        on <time datetime="1984-12-7">December 7th</time>.</p>
    <!-- ol元素 有序列表 -->
    <!-- li元素 列表中的项目 -->
    I also like:
    <ol type="I">
        <li value="1">bananas</li>
        <li value="4">mangoes</li>
        <li value="7">cherries</li>
    </ol>
    <!-- ul元素 无序列表 -->
    <!-- li元素 列表中的项目 -->
    <ul>
        <li>bananas</li>
        <li>mangoes</li>
        <li>cherries</li>
    </ul>
    <!-- dl dt dd元素  生成说明列表 -->
    <dl>
        <dt>Apple</dt>
        <dd>The apple is the pomaceous fruit of the apple tree</dd>
        <dd><i>Malus domestica</i></dd>
        <dt>Banana</dt>
        <dd>The banana is the parthenocarpic fruit of the banana tree</dd>
        <dd><i>Musa acuminata</i></dd>
        <dt>Cherry</dt>
        <dd>The cherry is the stone fruit of the genus <i>Prunus</i></dd>
    </dl>

    You can see other fruits I like <a href="./HTML_基本结构.html">here</a>.
    <!-- figure元素 一个独立的内容单元，可带标题 -->
    <figure>
        <figcaption>Listing 23. Using the code element</figcaption>
        <code>var fruits = ["apples","oranges","mangoes","cherries"];<br>
            document.writeln("I like " + fruits.length + " fruits");</code>
    </figure>
</body>

</html>